/* CSS Document */

.banner{width:100%; height:430px;position:relative; margin-top:-173px;  background:url(../images/banner2.jpg) top center no-repeat;}
.banner .list{width:100%;height:430px;overflow:hidden;position:relative;z-index:1;}
.banner .list li{width:100%;height:430px;position:absolute;left:0px;top:0px;display:none;}
.banner .list li a{width:1200px;margin:0 auto;position:relative;display:block;overflow:hidden;height:430px;}
.banner .list li a:hover{text-decoration:none;}
.banner .list li.bg1{/*background:#2398f8;*/}
.banner .list li.bg1 a .text1{width:200px;left:180px;height:200px;top:60px;position:absolute;z-index:3;}
.banner .list li.bg1 a .text1.hover{animation:img1 1s ease-out;-webkit-animation:img1 1s ease-out;}
.banner .list li.bg1 a .text2{right:65px;top:210px;position:absolute;z-index:3;}
.banner .list li.bg1 a .text2.hover{animation:img2 0.7s ease-out;-webkit-animation:img2 0.7s ease-out;}
.banner .list li.bg1 a .text3{right:130px;width:251px;top:29px;position:absolute;z-index:3;}
.banner .list li.bg1 a .text3.hover{animation:img3 1s ease-out;-webkit-animation:img3 1s ease-out;}
.banner .btn{position:absolute;top:20px;left:50%;margin-left:340px;z-index:100; display:none;}
.banner .btn li{margin-left:12px;background:#fff;text-indent:-999em;float:left;width:14px;height:14px;cursor:pointer;border-radius:50%;}
.banner .btn li.hover{background:#FC3;}
@keyframes img1 {0% {left:-200px;transform:rotate(-180deg);} 100% {left:180px;transform:rotate(0deg);}}
@-webkit-keyframes img1 {0% {left:-200px;-webkit-transform:rotate(-180deg);} 100% {left:180px;-webkit-transform:rotate(0deg);}}
@keyframes img2 {0% {right:-350px;opacity:0.3;} 100% {right:65px;opacity:1;}}
@-webkit-keyframes img2 {0% {right:-350px;opacity:0.3;} 100% {right:65px;opacity:1;}}
@keyframes img3 {0% {right:-100px;opacity:0.3;} 100% {right:130px;opacity:1;}}
@-webkit-keyframes img3 {0% {right:-100px;opacity:0.3;} 100% {right:130px;opacity:1;}}
.banner .list li.bg2{/*background:#0ecbc9;*/}
.banner .list li.bg2 .text1{position:absolute;right:65px;top:210px;}
.banner .list li.bg2 .text1.hover{animation:img2_1 1.5s ease;-webkit-animation:img2_1 1.5s ease;}
.banner .list li.bg2 .text2{position:absolute;left:0;top:-20px;}
.banner .list li.bg2 .text2.hover{animation:img2_2 2s ease;-webkit-animation:img2_2 2s ease;}
.banner .list li.bg2 .text3{position:absolute;left:20px;top:90px;}
.banner .list li.bg2 .text3.hover{animation:img2_3 1.2s ease-out;-webkit-animation:img2_3 1.2s ease-out;}
.banner .list li.bg2 .text4{position:absolute;left:262px;top:253px;transform:scale(1);-webkit-transform:scale(1);}
.banner .list li.bg2 .text4.hover{animation:img2_4 1.7s ease-out;-webkit-animation:img2_4 1.7s ease-out;}
.banner .list li.bg2 .text5{position:absolute;right:48px;top:95px;}
.banner .list li.bg2 .text5.hover{animation:img2_5 1.5s ease-out;-webkit-animation:img2_5 1.5s ease-out;}
.banner .list li.bg2 .text6{position:absolute;right:90px;top:180px;}
.banner .list li.bg2 .text6.hover{animation:img2_6 1.8s ease-out;-webkit-animation:img2_6 1.8s ease-out;}

/*.banner .list li.bg2 .text7{position:absolute;right:28px;top:235px;}
.banner .list li.bg2 .text7.hover{animation:img2_7 2s ease-out;-webkit-animation:img2_7 2s ease-out;}*/

@keyframes img2_1 {0% {transform:rotateY(150deg);} 100% {transform:rotateY(0deg);}}
@-webkit-keyframes img2_1 {0% {-webkit-transform:rotateY(150deg);} 100% {-webkit-transform:rotateY(0deg);}}

@keyframes img2_2 {0% {transform:rotate(280deg);} 100% {transform:rotate(0deg);}}
@-webkit-keyframes img2_2 {0% {-webkit-transform:rotate(280deg);} 100% {-webkit-transform:rotate(0deg);}}
@keyframes img2_3 {20%{transform:rotateY(180deg);left:-500px;} 90% {transform:rotateY(0deg);left:20px;} 92%{top:85px;} 94%{top:95px;} 96%{top:83px;} 98%{top:97px;} 100%{top:90px;}}
@-webkit-keyframes img2_3 {20%{-webkit-transform:rotateY(180deg);left:-500px;} 90% {-webkit-transform:rotateY(0deg);left:20px;} 92%{top:85px;} 94%{top:95px;} 96%{top:83px;} 98%{top:97px;} 100%{top:90px;}}
@keyframes img2_4 {0%{transform:scale(0);} 40%{transform:scale(0);} 100% {transform:scale(1);}}
@-webkit-keyframes img2_4 {0%{-webkit-transform:scale(0);} 40%{-webkit-transform:scale(0);} 100% {-webkit-transform:scale(1);}}
@keyframes img2_5{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:48px;opacity:1;}}
@-webkit-keyframes img2_5{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:48px;opacity:1;}}
@keyframes img2_6{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:90px;opacity:1;}}
@-webkit-keyframes img2_6{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:90px;opacity:1;}}
@keyframes img2_7{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:28px;opacity:1;}}
@-webkit-keyframes img2_7{0%{right:-400px;}  50%{right:-400px;opacity:0.3;} 100% {right:28px;opacity:1;}}
.banner .list li.bg3{ /*background:#ffc028;*/ }
.banner .list li.bg3 .text1{position:absolute;left:0px;top:85px;z-index:10;}
.banner .list li.bg3 .text2-1{position:absolute;left:32px;top:131px;}
.banner .list li.bg3 .text2-2{position:absolute;left:389px;top:0px;}
.banner .list li.bg3 .text3{position:absolute;left:106px;top:0px;}
.banner .list li.bg3 .text4{position:absolute;left:345px;top:162px;font-size:30px;color:#fff;text-align:center;}
.banner .list li.bg3 .text5{position:absolute;left:99px;top:218px;}
.banner .list li.bg3 .text6{position:absolute;left:130px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text7{position:absolute;left:386px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text8{position:absolute;left:640px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text1.hover{animation:img3_1 1s ease;-webkit-animation:img3_1 1s ease;}
.banner .list li.bg3 .text2-1.hover{transform-origin:right bottom;-webkit-transform-origin:right bottom;animation:img3_2-1 30s linear;-webkit-animation:img3_2-1 30s linear;}
.banner .list li.bg3 .text2-2.hover{transform-origin:left bottom;-webkit-transform-origin:left bottom;animation:img3_2-2 30s linear;-webkit-animation:img3_2-2 30s linear;}
.banner .list li.bg3 .text4.hover{animation:img3_4 1.5s ease;-webkit-animation:img3_4 1.5s ease;}
.banner .list li.bg3 .text6.hover{animation:img3_6 0.7s ease;-webkit-animation:img3_6 0.7s ease;}
.banner .list li.bg3 .text7.hover{animation:img3_7 0.7s ease;-webkit-animation:img3_7 0.7s ease;}
.banner .list li.bg3 .text8.hover{animation:img3_8 0.7s ease;-webkit-animation:img3_8 0.7s ease;}
@keyframes img3_1 {0% {top:-100px;} 50%{top:-80px;} 100% {top:85px;}}
@-webkit-keyframes img3_1 {0% {top:-100px;} 50%{top:-80px;} 100% {top:85px;}}
@keyframes img3_2-1 {0% {transform:rotate(-20deg);} 10% {transform:rotate(100deg);} 20% {transform:rotate(-20deg);} 30% {transform:rotate(100deg);} 40% {transform:rotate(-20deg);} 50% {transform:rotate(100deg);} 60% {transform:rotate(-20deg);} 70% {transform:rotate(100deg);} 80% {transform:rotate(-20deg);} 90% {transform:rotate(100deg);} 100% {transform:rotate(0deg);}}
@-webkit-keyframes img3_2-1 {0% {-webkit-transform:rotate(-20deg);} 10% {-webkit-transform:rotate(100deg);} 20% {-webkit-transform:rotate(-20deg);} 30% {-webkit-transform:rotate(100deg);} 40% {-webkit-transform:rotate(-20deg);} 50% {-webkit-transform:rotate(100deg);} 60% {-webkit-transform:rotate(-20deg);} 70% {-webkit-transform:rotate(100deg);} 80% {-webkit-transform:rotate(-20deg);} 90% {-webkit-transform:rotate(100deg);} 100% {-webkit-transform:rotate(0deg);}}
@keyframes img3_2-2 {0% {transform:rotate(10deg);} 10% {transform:rotate(-100deg);} 20% {transform:rotate(10deg);} 30% {transform:rotate(-100deg);} 40% {transform:rotate(10deg);} 50% {transform:rotate(-100deg);} 60% {transform:rotate(10deg);} 70% {transform:rotate(-100deg);} 80% {transform:rotate(10deg);} 90% {transform:rotate(-100deg);} 100% {transform:rotate(0deg);}}
@-webkit-keyframes img3_2-2 {0% {-webkit-transform:rotate(10deg);} 10% {-webkit-transform:rotate(-100deg);} 20% {-webkit-transform:rotate(10deg);} 30% {-webkit-transform:rotate(-100deg);} 40% {-webkit-transform:rotate(10deg);} 50% {-webkit-transform:rotate(-100deg);} 60% {-webkit-transform:rotate(10deg);} 70% {-webkit-transform:rotate(-100deg);} 80% {-webkit-transform:rotate(10deg);} 90% {-webkit-transform:rotate(-100deg);} 100% {-webkit-transform:rotate(0deg);}}
@keyframes img3_4 {0%{opacity:0;transform:scale(0);} 30%{opacity:0;transform:scale(0);} 80%{opacity:0.7;transform:scale(1.2);} 100%{opacity:1;transform:scale(1);}}
@-webkit-keyframes img3_4 {0%{opacity:0;-webkit-transform:scale(0);} 30%{opacity:0;-webkit-transform:scale(0);} 80%{opacity:0.7;-webkit-transform:scale(1.2);} 100%{opacity:1;-webkit-transform:scale(1);}}
@keyframes img3_6 {0% {left:-210px;} 100% {left:130px;}}
@-webkit-keyframes img3_6 {0% {left:-210px;} 100% {left:130px;}}
@keyframes img3_7 {0%{opacity:0;transform:scale(4);} 100%{opacity:1;transform:scale(1);}}
@-webkit-keyframes img3_7 {0%{opacity:0;-webkit-transform:scale(4);} 100%{opacity:1;-webkit-transform:scale(1);}}
@keyframes img3_8 {0% {right:-210px;} 100% {right:130px;}}
@-webkit-keyframes img3_8 {0% {right:-210px;} 100% {right:130px;}}
.banner .list li.bg4{/*background:#ff7575;*/}
.banner .list li.bg4 .text1{position:absolute;left:250px;top:45px;font-size:69px;color:#ffe9e9;}
.banner .list li.bg4 .text2{overflow:hidden;width:66px;position:absolute;left:251px;top:137px;}
.banner .list li.bg4 .text3{opacity:0;position:absolute;left:485px;top:55px;}
.banner .list li.bg4 .text4{opacity:0;transform-origin:left bottom;-webkit-transform-origin:left bottom;position:absolute;left:500px;top:105px;}
.banner .list li.bg4 .text5{opacity:0;position:absolute;left:508px;top:192px;}
.banner .list li.bg4 .text6{opacity:0;transform-origin:left bottom;-webkit-transform-origin:left bottom;position:absolute;left:510px;top:230px;}
.banner .list li.bg2 .text7{position:absolute;left:0;bottom:0;}
.banner .list li.bg2 .text7{position:absolute;left:0;bottom:0;}

.banner .list li.bg4 .text3.hover{animation:img4_3 1s 0.5s ease forwards;-webkit-animation:img4_3 1s 0.5s ease forwards;}
.banner .list li.bg4 .text4.hover{animation:img4_4 1.2s 0.5s ease forwards;-webkit-animation:img4_4 1.2s 0.5s ease forwards;}
.banner .list li.bg4 .text5.hover{animation:img4_5 1.5s 0.5s ease forwards;-webkit-animation:img4_5 1.5s 0.5s ease forwards;}
.banner .list li.bg4 .text6.hover{animation:img4_6 0.3s 1.5s ease-out forwards;-webkit-animation:img4_6 0.3s 1.5s ease-out forwards;}
.banner .list li.bg2 .text7.hover{animation:img4_7 0.8s ease-in;-webkit-animation:img4_7 0.8s ease-in; left:0;bottom:0;}

.banner .list li.bg4 .text7.hover{animation:img4_7 0.8s ease-in;-webkit-animation:img4_7 0.8s ease-in; left:0;bottom:0;}

@keyframes img4_3 {0%{top:-100px;opacity:0;} 100%{top:50px;opacity:1;}}
@-webkit-keyframes img4_3 {0%{top:-100px;opacity:0;} 100%{top:50px;opacity:1;}}
@keyframes img4_4 {0%{transform:scale(0);} 100%{transform:scale(1);opacity:1;}}
@-webkit-keyframes img4_4 {0%{-webkit-transform:scale(0);} 100%{-webkit-transform:scale(1);opacity:1;}}
@keyframes img4_5 {0%{transform:scale(0);} 100%{transform:scale(1);opacity:1;}}
@-webkit-keyframes img4_5 {0%{-webkit-transform:scale(0);} 100%{-webkit-transform:scale(1);opacity:1;}}
@keyframes img4_6 {0%{transform:rotate(30deg);opacity:0;} 100%{transform:rotate(0deg);opacity:1;}}
@-webkit-keyframes img4_6 {0%{-webkit-transform:rotate(30deg);opacity:0;} 100%{-webkit-transform:rotate(0deg);opacity:1;}}
@keyframes img4_7{0%{bottom:-300px;opacity:0;} 100%{bottom:0;opacity:1;}}
@-webkit-keyframes img4_7{0%{bottom:-300px;opacity:0;} 100%{bottom:0;opacity:1;}}